<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->
<script type="text/javascript" src="../../libs/js/graphical/raphael.js"></script>
<script type="text/javascript" src="../../libs/js/graphical/svgmap.js"></script>
<script type="text/javascript" src="../../libs/js/graphical/map_data/china.js"></script>
<style type="text/css">
			.demo {
				width: 760px;
				margin: 0px auto 0 auto;
				font-size: 14px;
			}
			#map {
				width: 600px;
				margin: 10px auto
			}


			.mapTip{
				display:none; 
				position:absolute; 
				padding:8px; 
				border: 1px solid #c4d0df;
				background: #f7f8fa;
				box-shadow: 0 0 6px 1px rgba(0,0,0,.08);
				border-radius: 5px;
				}

			.mapTip .arrow,
			.mapTip .arrowMask{ 
				position: absolute; 
				width: 0; 
				height: 0; 
				border-color: transparent; 
				border-style: solid;
			}
			.mapTip .arrow{ 
				bottom: -7px; 
				left: 50%; 
				margin-left: -7px; 
				border-width: 7px; 
				border-top-color: #c4d0df; 
				border-bottom-width: 0;
			}
			.mapTip .arrowMask{
				bottom: 1px; 
				border-width: 6px; 
				margin-left: -6px; 
				border-top-color: #f7f8fa; 
				border-bottom-width: 0;
			}

		
		</style>
	</head>
	<body>
<div class="page_content">	
	<div class="groupTitle"><span>示例说明</span></div>
		点击省份区域，切换到省份或直辖市地图。点击文字“全国”返回。
	<div class="demo">
		<div class="mapNav" id="MapNav"><a href="javascript:;">全国</a></div>
		<div class="svgmap">
			<div id="SvgMap"></div>
			
		</div>
    </div>
</div>  
		<script type="text/javascript">
			$(function(){
		var mapRegion;

	function showMap(pId, pName){
		if(pId){
			$('#MapNav').html('<a href="javascript:;">全国</a> > <a href="javascript:;" data-id="'+pId+'" data-name="'+pName+'">'+pName+'</a>');
			$.ajax({
				url: '../../libs/js/graphical/map_data/china/province/'+pId+'.js',
				dataType: 'script',
				cache: true
			}).done(function() {
    			$('#SvgMap').animate({'opacity': 0}, 300, function() {
    			mapRegion = $('#SvgMap').SVGMap({
					mapName: pId,
					mapWidth: 600,
					mapHeight: 500,
					showName: false,
			    	showCapital: true,
			    	showTip:true
				});
				$('#SvgMap').animate({'opacity': 1}, 300)
				});
    		});
		}else{
			$('#MapNav').html('<a href="javascript:;">全国</a>');
			mapRegion = $('#SvgMap').SVGMap({
				external: true,
				mapName: 'china',
				mapWidth: 600,
				mapHeight: 500,
				mapTipWidth: 100,
				showName: true,
				showTip: false,
		    	showCapital: true,
		    	stateCursor: 'pointer',
		    	showCity: function(pId, pName){
		    		showMap(pId, pName);
		    	}
			});
		}
		
	}
	// $('#MapColor').show();

	showMap();

	$('#MapNav').on('click', 'a', function(){
		var _id = $(this).data('id');
		var _name = $(this).data('name');
		if(_id){
			showMap(_id, _name);
		}else{
			showMap();
		}
		
	})


			
});
		</script>
	</body>
</html>